<!-- 银行卡 - 添加、编辑 -->
<template>
	<Modal width="550" class-name="vertical-center-modal" class="pop-address" :mask-closable="false" @on-cancel="close"
		v-model="cardShow"
		:title="formValidate.id ? $t('setting.settingEditAccount') : $t('setting.settingAddAccount')">
		<div class="pop-address-content">
			<Form v-if="cardShow" ref="cardValidateRef" :model="formValidate" label-position="top"
				:rules="accountValidate">
				<!-- 收款币种 -->
				<FormItem :label="$t('user.recipientCurrency')" prop="currency">
					<Select v-model="formValidate.currency" :placeholder="$t('user.pleaseSelect')" class="select"
						filterable>
						<Option v-for="item in currencyList" :value="item.code" :label="item.code"
							:key="item.countryCode">
						</Option>
					</Select>
				</FormItem>
				<!-- 收款人姓名 -->
				<FormItem :label="$t('user.recipientName')" prop="payeeName">
					<Input v-model="formValidate.payeeName" :placeholder="$t('user.pleaseEnter')"></Input>
				</FormItem>
				<!-- 开户行 -->
				<FormItem :label="$t('user.bankName')" prop="payeeBank">
					<Input v-model="formValidate.payeeBank" :placeholder="$t('user.pleaseEnter')"></Input>
				</FormItem>
				<!-- 银行卡号 -->
				<FormItem :label="$t('user.bankCardNumber')" prop="payeeAccount">
					<Input v-model="formValidate.payeeAccount" :placeholder="$t('user.pleaseEnter')"></Input>
				</FormItem>
				<!-- 所在国家 -->
				<FormItem :label="$t('setting.settingCountryCode')" prop="countryCode">
					<Select v-model="formValidate.countryCode" :placeholder="$t('user.pleaseSelect')" class="select"
						filterable>
						<Option v-for="item in countryList" :value="item.code" :label="item.text" :key="item.code">
						</Option>
					</Select>
				</FormItem>
				<!-- SWIFT代码 -->
				<FormItem :label="$t('setting.settingSwift')" prop="swiftCode">
					<Input v-model="formValidate.swiftCode" :placeholder="$t('user.pleaseEnter')"></Input>
				</FormItem>
				<div class="col-888 f-12 lin-18">
					{{ $t('setting.settingIfSwift') }}
				</div>
			</Form>
		</div>
		<div slot="footer" class="footer">
			<div>
				<Checkbox v-model="formValidate.isDefault">
					<span class="text">{{ $t('setting.settingEditDefault') }}</span>
				</Checkbox>
			</div>
			<div class="flex a-c j-e">
				<Button v-if="formValidate.id" class="pop-delete flex a-c j-c" @click="cardDeleteConfirm">{{
					$t('user.delete') }}</Button>
				<!-- <Button class="pop-cancel flex a-c j-c" @click="close">{{ $t('user.cancel') }}</Button> -->
				<Button v-if="!formValidate.id" class="pop-confirm flex a-c j-c" :loading="loading"
					@click="cardAddConfirm" type="primary">{{ $t('user.confirm') }}</Button>
				<Button v-else class="pop-confirm flex a-c j-c" :loading="loading" @click="cardEditConfirm"
					type="primary">{{ $t('user.edit') }}</Button>
			</div>
		</div>
	</Modal>
</template>

<script>
import { mapState } from "vuex";
import { userCardAdd, userCardEdit, deleteCard } from "@/api/card";

export default {
	data() {
		return {
			cardShow: false,
			formValidate: {
				currency: '', // 收款币种
				isDefault: false, // 是否默认
				payeeAccount: '', // 收款人账号
				payeeBank: '', // 收款人银行
				payeeName: '',// 收款人姓名
				swiftCode: '',//swiftCode
				countryCode: '',//国家编码
				payeeType: 1
			},
			accountValidate: {
				currency: [
					{ required: true, message: this.$t('user.pleaseSelect'), trigger: 'change' }
				],
				payeeName: [
					{ required: true, message: this.$t('user.pleaseEnter'), trigger: 'blur' }
				],
				payeeBank: [
					{ required: true, message: this.$t('user.pleaseEnter'), trigger: 'blur' }
				],
				payeeAccount: [
					{ required: true, message: this.$t('user.pleaseEnter'), trigger: 'blur' }
				],
				swiftCode: [
					{ required: true, message: this.$t('user.pleaseEnter'), trigger: 'blur' }
				],
				countryCode: [
					{ required: true, message: this.$t('user.pleaseSelect'), trigger: 'change' }
				]
			},
			loading: false,
		}
	},
	computed: {
		...mapState({
			currencyList: (state) => {
				let list = [];
				if (state.config.config) {
					list = state.config.config.currencyList;
				}
				return list;
			},
			countryList: (state) => {
				let list = [];
				if (state.config.config) {
					list = state.config.config.countryList;
				}
				return list;
			}
		})
	},
	methods: {
		open(obj = {}) {
			if (obj && obj.id) {//编辑
				this.formValidate = obj;
			}
			this.formValidate.payeeType = 1;
			this.cardShow = true;
		},
		close() {
			this.cardShow = false;
			this.formValidate = {
				currency: '', // 收款币种
				isDefault: false, // 是否默认
				payeeAccount: '', // 收款人账号
				payeeBank: '', // 收款人银行
				payeeName: '',// 收款人姓名
				swiftCode: '',//swiftCode
				countryCode: '',//国家编码
				payeeType: 1
			}
			this.$refs.cardValidateRef.resetFields();
		},
		//新增
		cardAddConfirm() {
			this.$refs.cardValidateRef.validate((valid) => {
				if (valid) {
					this.loading = true;
					userCardAdd(this.formValidate).then((res) => {
						this.$Message.success(this.$t('user.addSuccessfully'));
						this.commonFun();
					}).catch(() => {
						this.loading = false;
					})
				}
			})
		},
		//编辑
		cardEditConfirm() {
			this.$refs.cardValidateRef.validate((valid) => {
				if (valid) {
					this.loading = true;
					userCardEdit(this.formValidate).then((res) => {
						this.$Message.success(this.$t('user.changeSuccessfully'));
						this.commonFun();
					}).catch(() => {
						this.loading = false;
					})
				}
			})
		},
		// 删除地址
		cardDeleteConfirm() {
			this.loading = true;
			deleteCard(this.formValidate.id).then((res) => {
				this.$Message.success(this.$t('user.deletedSuccessfully'));
				this.commonFun();
			})
		},
		commonFun() {
			this.loading = false;
			this.close();
			this.$emit('editSuccess');
		}
	}
}
</script>

<style lang="less" scoped>
.pop-address {

	/deep/ .ivu-modal-header {
		border-bottom: 0 !important;
		padding: 30px 24px 10px !important;


		.ivu-modal-header-inner {
			font-weight: 600;
			font-size: 20px;
		}
	}

	/deep/ .ivu-modal-footer {
		padding: 16px 24px;
		text-align: left;
	}

	/deep/ .ivu-modal-body {
		padding: 10px 24px 20px;
		max-height: 50vh;
		overflow-y: auto;
	}

	.pop-cancel {
		height: 36px;
		min-width: 80px;
		padding: 0 12px;
		border: 1px solid #888;
		border-radius: 2px 2px 2px 2px;
		margin: 0;
		color: #222222;
		font-size: 16px;
		line-height: 16px;
		border-radius: 8px;
	}

	.pop-delete {
		height: 36px;
		min-width: 80px;
		padding: 0 12px;
		border: 1px solid #888;
		border-radius: 2px 2px 2px 2px;
		margin: 0;
		color: #222222;
		font-size: 16px;
		line-height: 16px;
		margin-right: 16px;
		border-radius: 8px;
	}

	.pop-confirm {
		height: 36px;
		min-width: 80px;
		padding: 0 12px;
		border: none;
		margin: 0;
		margin-left: 16px;
		color: #fff;
		font-size: 16px;
		line-height: 16px;
		border-radius: 2px 2px 2px 2px;
		border-radius: 8px;
	}

	.pop-address-content {
		/deep/ .ivu-input {
			border-radius: 4px !important;
		}

		.flex-content {
			.input {}

			.select {
				.option-content {
					display: flex;
					align-items: center;

					.logo {
						display: inline-block;
						width: 30px;
						margin-right: 4px;
					}
				}
			}

			.country-wrap {
				background-color: #fff;
				border-radius: 4px;
				border: 1px solid #dcdee2;
				padding: 0 8px;
			}
		}
	}
}
</style>